<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-03 22:57:27
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-07-17 23:03:47
 * @FilePath: /chat-ai-plus/src/components/InputArea/InputArea.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="flex container-fluid">
    <view class="row justify-content-center">
      <view class="col-lg-12 col-xl-10 col-xxl-8 p_sm">
        <label class="input-area-container" id="input-area">
          <view>
            <view
              class="file"
              v-for="(item, index) in customFiles"
              :key="index"
            >
              <u-icon
                class="close-btn"
                name="close-circle"
                size="28"
                @click="handleRemoveFile(index)"
              ></u-icon>
              <u-image
                width="80"
                height="80"
                radius="6"
                :src="item.imageThumb"
              ></u-image>

              <view class="uploading" v-if="!item.uploaded"
                ><u-icon name="reload" size="30"></u-icon>
              </view>
            </view>
          </view>
          <textarea
            class="textarea"
            v-model="text"
            :placeholder="$t('app.input.placeholder')"
            auto-height
            @linechange="handleChange"
          ></textarea>

          <view class="align-items_center justify_between">
            <view class="align-items_center gap_xs">
              <u-icon
                @click="handleChooseFiles"
                size="20"
                name="hezi"
                custom-prefix="icon"
              ></u-icon>
              <u-icon
                @click="handleChooseImage"
                size="20"
                name="photo-fill"
              ></u-icon>
            </view>

            <view>
              <u-icon
                name="dingwei2"
                custom-prefix="icon"
                @click="handleSend"
                size="32"
              ></u-icon>
            </view>
          </view>
        </label>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  ref,
  watch,
} from 'vue';
import useChatStore from '@/store/modules/chat';
import { onLoad } from '@dcloudio/uni-app';
import { base64 } from '@/utils/encipher';
import { onKeyStroke } from '@vueuse/core';

import { isMobile } from '@/utils/common';
import { useUpload } from './hooks';
import emitter from '@/utils/emitter';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  name: 'InputArea',
  setup() {
    const { t } = useI18n();
    const chatStore = useChatStore();
    const {
      isUpload,
      customFiles,
      handleChooseImage,
      handleChooseFiles,
      handleRemoveFile,
    } = useUpload();
    const text = ref('');
    const isConversation = computed(() => chatStore.isConversation);

    const handleSend = () => {
      if (isConversation.value) {
        return;
      }
      if (!isUpload.value) {
        uni.showToast({
          title: t('app.upload'),
          icon: 'none',
        });
        return;
      }
      if (!text.value && customFiles.value.length === 0) {
        return;
      }
      chatStore.generate({
        msg: text.value,
        addFileList: customFiles.value.map(item => ({
          fileUrl: item.filePath,
          type: item.type,
        })),
        type: 1,
      });
      text.value = '';
      customFiles.value = [];
    };

    onKeyStroke(['Enter'], event => {
      event.preventDefault();
      if (
        event.key === 'Enter' &&
        event.code === 'Enter' &&
        event.which === 13 &&
        !event.ctrlKey
      ) {
        handleSend();
      }
    });

    watch(
      () => chatStore.currentRoom,
      () => {
        nextTick(() => {
          handleChange();
        });
      }
    );

    emitter.on('send', message => {
      if (isConversation.value) {
        return;
      }
      chatStore.generate({
        msg: message,
        addFileList: [],
        type: 1,
      });
      text.value = '';
      customFiles.value = [];
    });

    const handleChange = () => {
      const dom = document.getElementById('input-area');
      emitter.emit('inputChange', dom?.offsetHeight);
    };
    watch(
      () => customFiles.value,
      () => {
        nextTick(() => {
          handleChange();
        });
      }
    );

    onMounted(() => {
      nextTick(() => {
        handleChange();
      });
    });

    return {
      text,
      handleChange,
      handleSend,
      isUpload,
      customFiles,
      handleChooseImage,
      handleChooseFiles,
      handleRemoveFile,
      isConversation,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.input-area-container {
  display: block;
  border: solid 1px #ededed;
  border-radius: $radius;
  padding: map-get($spaces, xs);
  background: #fff;

  .textarea {
    box-sizing: border-box;
    width: 100%;

    height: 40px;
    padding: map-get($spaces, xs);
    line-height: 1.4;
  }

  .file {
    position: relative;
    display: inline-block;
    margin: calc(map-get($spaces, xs) / 2);
    background: #e4e4e7;
    border-radius: map-get($radii, sm);
    .close-btn {
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 1;
      padding: 0;
      width: unset;
      height: unset;
      border: none;
      border-radius: 50%;
      background: $white-color;
    }
    .uploading {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #f3f4f6;
      display: flex;
      justify-content: center;
      align-content: center;
      z-index: 2;
    }
  }

  .send-btn {
    display: inline-block;
    border: none;
    padding: 0;
  }
}
</style>
